import React, { useState } from "react";
import { Button, Input, Form } from "react-vant";

export default () => {
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    console.log(values);
  };
  const [count, setCount] = useState(5);

  const start = () => {

    const timer = setInterval(() => {
      setCount(count => {
        if(count === 1) {
          clearInterval(timer)
          return 5;
        }
        return count - 1
      });
    }, 1000)
  }



  return (
    <Form
      form={form}
      onFinish={onFinish}
      footer={
        <div style={{ margin: "16px 16px 0" }}>
          <Button round nativeType="submit" type="primary" block>
            登录
          </Button>
        </div>
      }
    >
      <Form.Item
        rules={[{ required: true, message: "请填写手机号" }]}
        name="tel"
        label="手机号"
      >
        <Input placeholder="请输入用户名" />
      </Form.Item>
      <Form.Item name="code" label="验证码">
        <Input
          placeholder="请输入验证码"
          suffix={
            <Button disabled={ count !== 5 } size="small" type="primary" onClick={start} >
              {
                count === 5 ? '获取验证码' : `倒计时还有${count}秒`
              }
            </Button>
          }
        />
      </Form.Item>
    </Form>
  );
};
